
<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />

    <!-- Le styles -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
    <link href="./css/bootstrap-responsive.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery.js"></script>
	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	<script type="text/javascript" src="js/excanvas.js"></script>
	
	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>

	<script id='code'>
		$(document).ready(function(){		
			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);

			function ZoneNode(name){
				var node = new JTopo.Node(name);
				node.setType('zone');
				return node;
			}
			function HostNode(name){
				var node = new JTopo.Node(name);
				node.setType('host');
				node.gravitate = function(targetNode){
					return targetNode.type == 'zone';
				};
				return node;
			}
			function VmNode(name){
				var node = new JTopo.Node(name);
				node.setType('vm');
				return node;
			}
			/* 星型布局-1 */
			var cNode = new HostNode('host_star2');
			cNode.layout = {r:150, beginDegree:Math.PI-Math.Pi/4, endDegree: Math.PI-Math.Pi/4};
			cNode.setLocation(360, 250);
			box.add(cNode);

			var n = 5+Math.round(Math.random() * 4);
			var points = JTopo.Layout.getStarPositions(cNode.x, cNode.y, n, cNode.layout.r, cNode.layout.beginDegree, cNode.layout.endDegree);
			for(var i=0; i<n; i++){
				var node = new VmNode('vm_star_2'+i);
				node.setLocation(points[i].x, points[i].y);
				box.add(node);
				var link = new JTopo.Link(cNode , node);
				box.add(link);
			}

			box.updateView();
		});
	</script>
	<style>
		canvas {
			background-color:#EEEEEE;
			border:1px solid #444;
		}
	</style>
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">演示</li>
              <li><a href="index.html">HelloWorld</a></li>
              <li><a href="link.html">连线</a></li>
			  <li><a href="group.html">节点分组</a></li>
              <li class="active"><a href="star.html">星型布局</a></li>
              <li><a href="tree.html">树形布局</a></li>
			  <li><a href="mix.html">混合布局</a></li>
              <li class="nav-header">效果</li>
			  <li><a href="gravitate.html">自动吸附</a></li>
			  <li><a href="donghua.html">动画</a></li>
			  <li><a href="#">弹性</a></li>
              <li><a href="#">缓动</a></li>
              <li><a href="#">粘性</a></li>
              <li class="nav-header">事件</li>
              <li><a href="click.html">鼠标单击</a></li>
              <li><a href="drag.html">鼠标拖拽</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <canvas id="canvas" style="" width="800" height="500"></canvas>
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Company 2013</p>
      </footer>

    </div><!--/.fluid-container-->

  </body>
</html>
